<template>
	<view class="indexTabbar">
		<!-- 左边日期 -->
		<view class="left">
			<view class="time-left">
				<swiper class="swiper" vertical="true" :duration="200" :current="swiperIndexInfo">
					<swiper-item v-for="(item,index) in indexArticleInfos" :key="item._id" @touchmove.stop.prevent>
						<!-- {{getDate.cDay}} -->
						{{item.cDay}}
					</swiper-item>
				</swiper>
				
			</view>
			<view class="time-right">
				<view class="time-right-top">
					{{getDate.ncWeek || ""}}
				</view>
				<view class="time-right-bottom">
					{{getDate.IMonthCn || ""}}{{getDate.IDayCn || ""}}
				</view>
			</view>
		</view>
		<!-- 右边地理位置 -->
		<view class="right">
			
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		props:{
			swiperIndexInfo:{
				type:Number,
				default: 0
			},
			indexArticleInfos:{
				type:Array,
				default: function(){
					return []
				}
			}
		},
		data() {
			return {
				getDate:{}
			}
		},
		watch:{
			indexArticleInfos:{
				handler(newName,oldName){
					//根据swriper的下标索引值知道它的数据
					this.getDate=this.indexArticleInfos[this.swiperIndexInfo]
				},
				immediate: true,
				deep: true
			},
			swiperIndexInfo:{
				handler(newName,oldName){
					//根据swriper的下标索引值知道它的数据
					this.getDate=this.indexArticleInfos[this.swiperIndexInfo]
				},
				immediate: true,
				deep: true
			}
		},
		components: {
			
		},
		methods:{
			//获取地理位置
			getLocation(){
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				        console.log(res);
				    }
				});
			}
		},
		mounted() {
			this.getLocation();
		}

	}
</script>

<style scoped lang="scss">
	.indexTabbar {
		background-color: #fff;
		color: $uni-main-color;
		border-bottom: 1px solid $uni-border-2;
		height: 120rpx;
		display: flex;
		align-items: center;
		width: 100%;
		position: fixed;
		padding: 10rpx 30rpx;
		overflow: hidden;
		box-sizing: border-box;

		.left {
			width: 50%;
			height: inherit;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			overflow: hidden;

			.time-left{
				font-size: 80rpx;
				font-weight: 700;
				width: 37%;
				height: inherit;
				display: flex;
				align-items: center;
				line-height: 120rpx;
				.swiper{
					width: 100%;
					height: inherit;
				}
			}
			
			.time-right{
				// padding-left: 16rpx;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				flex-direction: column;
				color: $uni-base-color;
				overflow: hidden;
			}
		}

		.right {
			width: 50%;
			box-sizing: border-box;
		}
	}
</style>
